import React, { useEffect, useState } from 'react';
import axios from 'axios';
import './mock';  // 引入mock.js

function App() {
  const [users, setUsers] = useState([]);
  const [name, setName] = useState('');
  const [age, setAge] = useState('');

  useEffect(() => {
    axios.get('/api/data')
      .then(response => {
        setUsers(response.data.list);
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  }, []);

  // const handleAddUser = () => {
  //   const newUser = { name, age: parseInt(age, 10) };
  //   axios.post('/api/users', newUser)
  //     .then(response => {
  //       setUsers([...users, response.data.data]);
  //       console.log(response.data.data);
  //       setName('');
  //       setAge('');
  //     })
  //     .catch(error => {
  //       console.error('Error adding user:', error);
  //     });
  // };

  return (
    <div className="App">
      <h1>User List</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>
            {user.name} - {user.time} years old
          </li>
        ))}
      </ul>
      <h2>Add New User</h2>
      {/* <input
        type="text"
        placeholder="Name"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <input
        type="number"
        placeholder="Age"
        value={age}
        onChange={(e) => setAge(e.target.value)}
      />
      <button onClick={handleAddUser}>Add User</button> */}
    </div>
  );
}

export default App;